import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import Icon from '@union-design/icon';
import Dropdown from '@union-design/dropdown';
import '@union-design/dropdown/lib/styles/index.css';
import Header from '@union-design/header';
import '@union-design/header/lib/styles/index.css';
import './index.css';

import personPng from '@/assets/personPng.png';
import AvatarPng from '@/assets/AvatarPng.png';

const GlobalHeaders: React.FC = (props: any) => {
  const { staffInfo } = props;

  const UserDrop = (props) => {
    const { children } = props;
    const [down1, setDown1] = useState(true);
    const listData = [
      {
        key: '1',
        title: '个人信息',
        icon: 'user-line',
      },
      {
        key: '2',
        title: '个人设置',
        icon: 'setting-line',
      },
      {
        key: '3',
        title: '退出登录',
        icon: 'logout-line',
      },
      {
        key: '4',
        title: '我的消息',
        icon: 'news-line',
      },
    ];

    const overlay = (
      <>
        {listData.map((item) => (
          <div key={item.key}>
            <Icon type={item.icon} />
            {item.title}
          </div>
        ))}
      </>
    );
    return (
      <Dropdown
        overlayClassName="dropHeader"
        trigger={['click']}
        overlay={overlay}
        onVisibleChange={(v: boolean) => {
          setDown1(!v);
        }}
      >
        <div className="drop-content">
          {children}
          <Icon
            style={{ fontSize: 14, marginLeft: 4 }}
            type={down1 ? 'down2-line' : 'up2-line'}
          />
        </div>
      </Dropdown>
    );
  };

  const menus = [
    {
      key: '33',
      title: (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div>{staffInfo.siteList[0].siteName}</div>
          <Icon type="down2-line" style={{ marginLeft: 8 }} />
        </div>
      ),
      icon: (
        <div
          style={{
            background: '#ffeeeb',
            padding: 4,
            borderRadius: '50%',
            height: 24,
            width: 24,
            lineHeight: 1,
          }}
        >
          <img src={personPng} alt="" width="16" style={{ display: 'block' }} />
        </div>
      ),
    },
    <div key="5">
      <UserDrop>
        <img src={AvatarPng} alt="" width={24} style={{ marginRight: 8 }} />
        <div>{staffInfo.staffName},您好</div>
      </UserDrop>
    </div>,
  ];

  return <Header title="中国联通数据看板平台" menus={menus} search={false} />;
};
export default connect(({ menuslider, user }: ConnectState) => ({
  menuslider: menuslider,
  staffInfo: user.staffInfo,
}))(GlobalHeaders);
